<template>
  <div class="root">
    <!-- 注意不要写成myname.value -->
    {{ myname }}
    <br>
    <input type="text" v-model="myinput"/>
    <button @click="handleClick">点我一下</button>
  </div>
</template>

<script>
import * as mika from "vue";

export default {
  setup() {
    // 基本数据类型使用ref函数包裹起来即可
    const myname = mika.ref('mikaisa');
    const myinput = mika.ref('');

    // 要注意，ref搞出来的数据在读取的时候是需要 xxxx.value这样的。但是在模板中是不用的，你可以理解为在模板中vue帮你做了.value这个操作
    const handleClick = function () {
      myname.value = 'mika';//做修改的话也是需要.value
      console.log(myname.value,myinput.value)
    };

    // 就像之前data中的return
    return {
      myname,
      myinput,
      handleClick,
    };
  },
};
</script>

<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
